<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/24
  Time: 22:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我要卖车</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sellCar.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">
</head>

<style>
    .deal-more:hover{
        text-decoration: none;
        background:#179500;
        color: #fff;
    }
    .deal-more{
        display: block;
        width: 168px;
        height: 40px;
        margin: 15px auto 50px;
        text-align: center;
        line-height: 40px;
        background: #22ac38;
        font-size: 16px;
        color: #fff;
    }
    #getCode{
        color: #2e6da4;
    }
</style>
<body onload="load()">
<%--<body>--%>
<!--nav开始-->
<div id="nav_my">

</div>
<!--nav结束-->
<!--nav beigin-->
<div class="container-fluid">
    <div class="row" style=" height:340px ;margin-top:-19px;background: url('${pageContext.request.contextPath}/images/buy_nav_bk.png') top no-repeat">
        <div class="seller">
            <h2>免费检测评估</h2>
            <input type="text" class="phone" value="" name="buycar" id="buycar" placeholder="请输入你的手机号">
            <input type="text" class="phone" value="" name="codes" id="codes" placeholder="请输入验证码">
            <p><a href="javascript:void(0)" id="getCode">获取验证码</a></p>
            <!--              <button>高价卖车</button>-->
            <button class="btn btn-primary btn-lg button" data-toggle="modal" onclick="show_modal();" id="sell">高价卖车</button>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">精翼卖车</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="" class="col-md-4 control-label">所属品牌</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="brNames" placeholder="请输入品牌">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stNames" class="col-md-4 control-label">所属车系</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="stNames" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carRegistration" class="col-md-4 control-label">上牌时间</label>
                                    <div class="col-md-6">
                                        <input type="date" class="form-control" id="carRegistration" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carMileage" class="col-md-4 control-label">行驶里程</label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="carMileage" placeholder="请输入所属车系">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="carDesc" class="col-md-4">文本框</label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" rows="3" id="carDesc"></textarea>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="register()">提交更改</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <br>
            <span>免费咨询电话:888-8888-888</span>
        </div>
    </div>
</div>
<!-- nav end-->

<!--intro begin-->
<div class="container-fluid intro">
    <div class="row">
        <!--        缩略图 begin-->
        <div class="row">
            <div class="col-md-4">
                <a href="#" class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/buy_one.png"
                         alt="">
                </a>
                <h3>免费检测评估</h3>
                <p>专业评估师给您精准价格</p>
            </div>
            <div class=" col-md-4">
                <a href="#" class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/buy_two.png"
                         alt="">
                </a>
                <h3>快速买车价格高</h3>
                <p>最快当日即可成交</p>
            </div>
            <div class=" col-md-4">
                <a href="#" class="thumbnail">
                    <img src="${pageContext.request.contextPath}/images/buy_three.png"
                         alt="">
                </a>
                <h3>全程一对一服务</h3>
                <p>买车全程免费服务</p>
            </div>
        </div>
        <!--        suoluotu end-->
    </div>
</div>
<!-- intro end-->
<br>
<!--服务 begin-->
<div class="container">
    <div class="row bargain">
        <h2 style="color: skyblue">最新成交</h2>
        <!--        缩略图-->
        <div class="row">
            <c:forEach var="x" items="${xrbRecentList}" begin="0" end="12">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="${pageContext.request.contextPath}/images/car1.png"
                             alt="" style="width: 80%;">
                        <div class="caption car_info ">
                            <p style="font-size: 15px">${x.brName}${x.stName} ${x.cPaifang}L ${x.cDrive}
                            </p>
                            <span class="mile">${x.cRegistration}年 | ${x.cMileage}万公里</span>
                            <p style="margin-top: 5px">成交价 <span style="color: #f76367;font-size: 18px">${x.rePrice}万</span>&nbsp;&nbsp;<strong>一月成交</strong></p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <!--        缩略图-->
    </div>
<%--    <a class="deal-more " data-toggle="modal" href="javascript:void(0)" >查看全部成交车源</a>--%>
    <a class="deal-more " data-toggle="modal" onclick="show_modals();" >查看全部成交车源</a>

<%--    模态框--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="">近期成交记录查询</h4>
                </div>
                <div class="modal-body">
<%--                    form表单--%>

<%--                        <form class="form-horizontal" role="form" method="get" action="/prj/newDeal/show">--%>
<%--                        <div class="form-group row">--%>
<%--                            <label for="brName" class="col-md-2 control-label">车型</label>--%>
<%--                            <div class="col-md-4">--%>
<%--                                <input type="text" name="brName" class="form-control" id="brName" placeholder="品牌">--%>
<%--                            </div>--%>
<%--                            <div class="col-md-4">--%>
<%--                                <input type="text" name="stName" class="form-control" id="stName" placeholder="品牌">--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <div class="form-group row">--%>
<%--                            <label for="year" class="col-sm-2 control-label">上牌时间</label>--%>
<%--                            <div class="col-md-4">--%>
<%--                                <input type="text" name="year" class="form-control" id="year" placeholder="年份">--%>
<%--                            </div>--%>
<%--                            <div class="col-md-4">--%>
<%--                                <input type="text" name="month" class="form-control" id="month" placeholder="月份">--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <div class="form-group row" >--%>
<%--                            <div class="col-md-2" style="margin-left: 210px;margin-top: 15px">--%>
<%--                                <button type="submit" class="btn btn-primary">近期成交记录查询</button>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </form>--%>

                    <form class="form-horizontal" role="form" method="get" action="/prj/newDeal/show">
                        <div class="form-group row">
                            <label class="col-md-2 control-label">车型</label>
                            <div class="col-md-4">
                                <select class="form-control brand" name="brName" id="brName" onchange="changeStyle(this.value)">
<%--                                    <option value="1" id="1">-请选择品牌-</option>--%>
                                    <c:forEach var="b" items="${brNames}">
                                        <option value="${b.id}" id="${b.id}">-${b.brName}-</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select class="form-control style" name="stName" id="stName">
<%--                                    <option id="getStName">-请选择车系-</option>--%>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-2 control-label">上牌时间</label>
                            <div class="col-md-4">
                                <select class="form-control year" name="year" id="year" onchange="changeMonth(this.value)">

                                </select>
                            </div>
                            <div class="col-md-4">
                                <select class="form-control month" name="month" id="month">

                                </select>
                            </div>
                        </div>

                        <div class="form-group row" >
                            <div class="col-md-2" style="margin-left: 210px;margin-top: 15px">
                                <button type="submit" class="btn btn-primary" onclick="newQuery()">近期成交记录查询</button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
<%--                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--%>
<%--                    <button type="button" class="btn btn-primary" onclick="register()">近期成交记录查询</button>--%>
                </div>
            </div><!-- /.modal-con tent -->
        </div><!-- /.modal -->
    </div>
</div>

<!--服务 end-->

<!--question begin-->
<div class="container-fluid">
    <div class="row question">
        <h2>精翼问答</h2>
        <div class="left">
            <h3>Q1：卖车流程是怎样的？</h3>
            <p>1、在本页填写卖车信息或拨打400-023-1529联系我们。<br/>
                2、由检测师进行车辆信息收集，并经过瓜子评估，给出瓜子价参考，由车主确定发布报价。<br/>
                3、达成交易合同，支付车款并过户。
            </p>
            <br>

            <h3>Q2:通过精翼网站出售车辆需要什么费用？</h3>
            <p>精翼网站上门验车不收取费用，免费评估，并为您免费提供车辆检测报告，整个服务过程全部免费。</p>
            <br>
            <h3>Q3:大概多长时间能够成交？</h3>
            <p>根据我们的经验，大部分车辆平均7日可以成交。但车辆的出售时间受市场情况、车况等多因素影响。</p>
        </div>
        <div class="right">
            <h3>Q4：卖车需要准备什么？</h3>
            <p>
                1、身份证；<br>
                2、环保标；<br>
                3、购置税本；<br>
                4、行驶证；<br>
                5、检字标；<br>
                6、购置税发票；<br>
                7、车辆登记证；<br>
                8、交强险标；<br>
                9、购车发票/最近一次过户发票；<br>
                10、交强险单。
            </p>
        </div>
    </div>
</div>
<!--footer-->
<div id="footer">

</div>
<!--footer-->
<!--question end-->
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    // var sty = document.getElementById("getStName");
    // var cl = document.getElementsByClassName("aa");
    function show_modals() {
        var myDate = new Date();
        var tMonth = myDate.getMonth() + 1;
        var tYear = myDate.getFullYear();
        for(var i=tYear;i>=tYear-20;i--){
            $("#year").append("<option class='bb' value='"+i+"'>" + i + "年</option>");
        }
        for (var j=1 ;j <= tMonth; j++){
            if (j<10){
                var ff = "0"+j;
                $("#month").append("<option class='bb' value='"+ff+"'>" + j + "月</option>");
            }else {
                $("#month").append("<option class='bb' value='"+i+"'>" + j + "月</option>");
            }

        }
        changeStyle(1);
        $('#myModal').modal('show');
    }
    //品牌与日期级联
    function changeStyle(stId){
        // cl.innerHTML = "";
        $("#stName").find("option").remove();
        //ajax级联查询车品牌对应车系
        $.ajax({
            type:'GET',
            dataType:"json",
            url:'${pageContext.request.contextPath}/cascade/'+stId,
            success:function (data) {
                var dataObj = data.data;
                for (var i=0;i<dataObj.length;i++){
                    $("#stName").append("<option class='aa' value='"+dataObj[i].id+"'>-" + dataObj[i].stName + "-</option>");
                }
                // var dataObj = data.data;
                //     var str = "";
                //    $.each(dataObj,function (index,item) {
                //        str+="<option id="+item.id+">"+item.stName+"</option>";
                //        console.log(str)
                //    })
                // sty.innerHTML = str
            }

        });
    }


    //年月级联
    function load(){
        // var myDate = new Date();
        // var tYear = myDate.getFullYear();
        // for(var i=tYear;i>=tYear-19;i++){
        //     $("#year").append("<option class='bb' value='"+i+"'>" + i + "年</option>");
        // }
    }
    function changeMonth(qq) {
        $("#month").find("option").remove();
        var myDate = new Date();
        var tYear = myDate.getFullYear();
        var tMonth = myDate.getMonth() + 1;
        if (tYear==qq){
            for (var i=1 ;i <= tMonth; i++){
                if (i<10){
                    var ff = "0"+i;
                    $("#month").append("<option class='bb' value='"+ff+"'>" + i + "月</option>");
                }else {
                    $("#month").append("<option class='bb' value='"+i+"'>" + i + "月</option>");
                }

            }
        }else {
            for (var i=1 ;i <= 12; i++){
                if (i<10){
                    var ff = "0"+i;
                    $("#month").append("<option class='bb' value='"+ff+"'>" + i + "月</option>");
                }else {
                    $("#month").append("<option class='bb' value='"+i+"'>" + i + "月</option>");
                }
            }
        }

    }

    //成交记录查询
    function newQuery() {
        var brName = $("#brName").val();
        var stName = $("#stName").val();
        var year = $("#year").val();
        var month = $("#month").val();
        console.log(brName);
        console.log(stName);
        console.log(year);
        console.log(month);
    }
    //级联  push增加
    // var province=document.getElementById("prov");
    // var city=document.getElementById("city");
    // var arr_prov=new Array(new Option("-请选择品牌-",''),
    //     new Option("湖南","hn"),
    //     new Option("广东","gd"),);
    // var arr_city=new Array();
    // arr_city[0]=new Array(new Option("-请选择车系-",''));
    // arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
    // arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
    // //动态载入所有省份
    // function load(){
    //     for(var i=0;i<arr_prov.length;i++){
    //         province.options[i]=arr_prov[i];
    //     }
    // }
    // //选中省份之后，根据索引动态载入相应城市
    // function changeCity(){
    //     //清空上次的选项
    //     city.options.length=0;
    //     //获取省一级的下拉列表选中的索引
    //     var index=province.selectedIndex;
    //     for(var i=0;i<arr_city[index].length;i++){
    //         city.options[i]=arr_city[index][i];
    //     }
    // }


    function register(){
        //一个控件一个控件进行获取了
        let brName = $("#brNames").val();
        let stName = $("#stNames").val();
        let carRegistration = $("#carRegistration").val();
        let carMileage = $("#carMileage").val();
        let carDesc = $("#carDesc").val();
        let call = $("#buycar").val();
        let datas = {"brName":brName,"stName":stName,"carRegistration":carRegistration,"carMileage":carMileage,"carDesc":carDesc,"call":call};
        $.post('${pageContext.request.contextPath}/carSales/sales',datas,function(data){
            if (data.code == "200"){
                $('#myModals').modal('hide');
                alert("预约卖车成功")
            }
        });
    }
    //key-value
    // function register(){
    //     let register_value = $("#registerForm").serialize();//表单序列化
    //     //发送key-value
    //     $.get('/prj/newDeal/show',register_value,function(data){
    //         success:function x(data) {
    //             if (data.code == 200){
    //                 data.xrbRecentList
    //             }
    //         }
    //     });
    // }

    var obj = document.getElementById("getCode");
    var fl = 60;//全局变量
    obj.onclick = function () {
        var phone = document.getElementById("buycar").value;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            alert("请输入正确的手机号");
            return;
        }else if (fl<60){
            //防止多次点击bug，控制正常倒计时
            alert("验证码已发送");
            return;
        }else {
            //根据号码ajax请求实现发送验证码
            $.ajax({
                type:'GET',
                dataType:"json",
                url:'${pageContext.request.contextPath}/send/'+phone,
                success:function (data) {
                    if (data.code == "200"){
                        timer();
                        alert("发送成功")
                    } else {
                        alert("发送失败")
                    }
                }
            });
        }
    };
    //计时器
    function timer(){
        fl--;
        obj.innerHTML = fl+"秒后重新获取";
        if (fl==0){
            obj.innerHTML="获取验证码";
            fl = 60;
        }else {
            setTimeout("timer()",1000);//递归调用
        }
    }


    function show_modal() {
        let code = $("#codes").val();
        var phone = document.getElementById("buycar").value;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            alert("请输入正确的手机号");
            return;
        }else if(!(/^\d{4}$/.test(code))){
            alert("请输入正确的验证码");
            return;
        }else {
            //ajax发送输入的验证码与手机号到后台校验
            $.ajax({
                type:'GET',
                dataType:"json",
                url:'${pageContext.request.contextPath}/send/'+phone+'/'+code,
                success:function (data) {
                    if (data.code == "200"){
                        $('#myModals').modal('show');
                    } else {
                        alert("输入错误，请重新输入")
                    }
                }
            });
        }
    }

    $(function(){
        $("#nav_my").load("${pageContext.request.contextPath}/loadJsp/toNav");
        $("#footer").load("${pageContext.request.contextPath}/loadJsp/toFooter");
    })
</script>
</body>
</html>